<!DOCTYPE html>
<html lang="ch">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<script>
		var html = document.getElementsByTagName('html')[0];
		html.style.fontSize = html.clientWidth / 3.75 + "px";
	</script>
	<title>订单详情</title>
	<link rel="stylesheet" href="../static/css/Reset.css" />
	<link rel="stylesheet" href="../static/css/orderDetail.css" />
	<link rel="stylesheet" href="../static/css/paymentPassword.css" />
</head>
<body style="background: #FFFFFF !important;">
	<div id="container" style="z-index: 1;" v-cloak>
		<div class="sdd_container">
			<div class="sdd_orderHead">
				<img class="sdd_adderssIcon" src="../static/images/address.png" />
				<div class="sdd_userMessage" v-cloak>
					<P class="sdd_userName">{{data.address.trueName}}<span>{{data.address.mobile}}</span></P>
					<p class="sdd_userAddress">{{data.address.areaInfo}}</p>
				</div>
				<!-- <img class="sdd_go" src="../static/images/go.png" /> -->
			</div>
			<p class="sdd_orderTime" v-cloak>下单时间：{{data.order.createTime}}</p>
			<div class="sdd_shopMessage">
				<a v-bind:href='"../yellowPage/yellowPage_detail.html?id=" + data.farm.id'>
					<img class="sdd_shopIocn" src="../static/images/shop.png" />
					<span v-cloak>{{data.farm.farmName}}</span>
					<img class="sdd_go" src="../static/images/go.png" />
				</a>
			</div>
			
			<div class="sdd_orderMessage">
				<a v-bind:href='"../bigSupply/bs_detail.html?id=" + data.goods.id'>
					<div class="sdd_productImg">
						<img v-bind:src='data.goods.mainImage' />
						<p v-if="data.goods.selleNow">现货</p>
						<p v-if="!data.goods.selleNow">缺货</p>
					</div>
				</a>
				<div class="sdd_productDetails" v-cloak>
					<p class="sdd_productTitle"><i class="sdd_tag">{{data.goods.goodsClassName}}<em class="jiantou"></em></i>{{data.goods.goodsName}}</p>
					<p class="fl_l">产量：{{data.goods.totalSupply}}{{data.goods.unit}}</p>
					<p class="fl_r" v-if="data.goods.price"><span class="sdd_proPrice">¥{{data.goods.price}}</span>元/{{data.goods.unit}}</p>
					<p class="fl_r" v-if="!data.goods.price"><span class="sdd_proPrice">可议</span></p>
					<p class="fl_l100">起批：{{data.goods.rangeBegin}}{{data.goods.unit}}</p>
				</div>
				<div class="sdd_cancle" v-if="data.order.orderStatus == 10" v-on:click="cancleOrder">取消订单</div>
			</div>
			
			<div class="sdd_orderDetails" v-cloak>
				<p>合同单价<span class="sdd_num">{{data.order.goodsPrice}}元/{{data.order.unit}}</span></p>
				<p>合同总量<span class="sdd_num">{{data.order.goodsAmount}}{{data.order.unit}}</span></p>
				<p>合同总额<span class="sdd_num">{{data.order.totalAmount}}元</span></p>
				<p>实付总额
					<span class="sdd_num">{{data.order.payAmount}}元</span>
				</p>
				<div class="sdd_line"></div>
				<p>备注信息</p>
				<p class="sdd_remark" v-if="data.order.remark">{{data.order.remark}}</p>
				<p class="sdd_remark" v-if="data.order.remark == null">无</p>
			</div>
			<ul class="sdd_service">
				<a href='tel:4000225588'><li><span><img src="../static/images/message.png" />联系客服</span></li></a>
				<a v-bind:href='"tel:" + data.farm.telephone'><li><img src="../static/images/phone.png" />联系卖家</li></a>
			</ul>
			<div class="sdd_noticeDiv">
				<div class="sdd_notice">交易须知</div><img class="sdd_noticeIcon" src="../static/images/notic.png" />
				<p>实际金额：根据双方实际商定结果输入金额，最终按照实际金额支付订单货款。 郑重说明：您支付的款项将进入托管账户，在您未完成交易并点击确认付款时，资金将不会进入商家账户。由连连支付、微信支付、支付宝支付、社员网多方联合保障您的财产安全，请放心使用。</p>
			</div>
			<div class="sdd_orderForm" v-cloak>
				<p>订单编号：<span id="orderNum">{{data.order.orderNo}}</span></p>
				<p v-for="record in data.recordInfo">{{record}}</p>
				<!--<div class="sdd_copy">复制</div>-->
			</div>
			<!--查看发货单-->
			<div class="sdd_shipped" v-if="data.order.freightProof">
				<p>查看发货单</p>
				<div class="sdd_shippedImg">
					<img @click="seeBigImg($event)" v-for="fp in freightProof" :src="fp"/>
				</div>
			</div>
			<!--查看大图-->
			<div v-if="isBigImg" @click="closeBigImg" class="bigImg">
				<img :src="bigImg" />
			</div>
		</div>
		<!--等待卖家确认-->
		<div class="sdd_orderBtn" v-if="data.order.orderStatus == 10" v-cloak>
			<div class="sdd_orderSum"><span>实付金额：</span><span class="sdd_orderPrice">¥{{data.order.payAmount}}</span></div>
			<div class="sdd_commit">等待卖家确认</div>
		</div>
		<!--前往支付-->
		<div class="sdd_orderBtn" v-if="data.order.orderStatus == 20" v-cloak>
			<div class="sdd_orderSum"><span>实付金额：</span><span class="sdd_orderPrice">¥{{data.order.payAmount}}</span></div>
			<div class="sdd_commit sdd_red"><a v-bind:href='"../bigSupply/payOrder.html?orderId=" + data.order.id'>前往支付</a></div>
		</div>
		<!--确认打款给卖家-->
		<div class="sdd_orderBtn" v-if="data.order.orderStatus == 30">
			<div class="sdd_orderSum"><span>已支付：</span><span class="sdd_orderPrice">¥{{data.order.payAmount}}</span></div>
			<div class="sdd_commit sdd_red" @click="shank"><a href="javascript:void(0)">确认打款给卖家</a></div>
		</div>
		<!--支付完成-->
		<div class="sdd_orderBtn" v-if="data.order.orderStatus == 40" v-cloak>
			<div class="sdd_orderSum"><span>实付金额：</span><span class="sdd_orderPrice">¥{{data.order.payAmount}}</span></div>
			<div class="sdd_commit sdd_gray">已完成</div>
		</div>
		<!--已取消-->
		<p v-if="data.order.orderStatus == 50" class="sdd_cancelled">已取消</p>
		
		<!--支付密码弹出-->
		<div class="dialogCommon">
			<div class="shank"></div>
			<div class="dialog_01">			
				<p>密码错误</p>
				<span class="newtry">重试</span>
				<span class="forget">忘记密码</span>
			</div>
		</div>
		<div class="big_shank">
			<div class="shank"></div>
			<div class="dialog">
				<div class="ftc_wzsf">
					<div class="srzfmm_box">
						<div class="qsrzfmm_bt clear_wl">
							<span>请输入密码</span>
						</div>
						<ul class="mm_box">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</div>
					<input type="hidden" name="password" id="zhifumm" value="" />
					<input type="hidden" name="password" id="zhifumm1" value="" />
					<div class="numb_box">
						<ul class="nub_ggg">
							<li><a href="javascript:void(0);">1</a></li>
							<li><a href="javascript:void(0);" class="zj_x">2</a></li>
							<li><a href="javascript:void(0);">3</a></li>
							<li><a href="javascript:void(0);">4</a></li>
							<li><a href="javascript:void(0);" class="zj_x">5</a></li>
							<li><a href="javascript:void(0);">6</a></li>
							<li><a href="javascript:void(0);">7</a></li>
							<li><a href="javascript:void(0);" class="zj_x">8</a></li>
							<li><a href="javascript:void(0);">9</a></li>
							<li><span></span></li>
							<li><a href="javascript:void(0);" class="zj_x">0</a></li>
							<li><span class="del"><img src="../static/images/fqshanchujp.png"></span></li>
						</ul>
					</div>
					<div class="numb_box1">
						<ul class="nub_ggg1">
							<li><a href="javascript:void(0);">1</a></li>
							<li><a href="javascript:void(0);" class="zj_x">2</a></li>
							<li><a href="javascript:void(0);">3</a></li>
							<li><a href="javascript:void(0);">4</a></li>
							<li><a href="javascript:void(0);" class="zj_x">5</a></li>
							<li><a href="javascript:void(0);">6</a></li>
							<li><a href="javascript:void(0);">7</a></li>
							<li><a href="javascript:void(0);" class="zj_x">8</a></li>
							<li><a href="javascript:void(0);">9</a></li>
							<li><span></span></li>
							<li><a href="javascript:void(0);" class="zj_x">0</a></li>
							<li><span class="del"><img src="../static/images/fqshanchujp.png"></span></li>
						</ul>
					</div>
					<div class="hbbj"></div>
				</div>
			</div>
		</div>
		<!--dialog 确认框-->
		<div class="modal" id="delete">
		    <div class="modal-content">
		        <div class="modal-body"><p>确定要取消订单吗？</P></div>
		        <div class="modal-footer" id="delete_model_footer">
		            <a class="btn-success" href="javascript:;">确定</a>
		            <a class="btn-default" href="javascript:;">取消</a>
		        </div>
		    </div>
		</div>
		<!--loading组件-->
		<loading v-show="showLoading"></loading>
	</div>
</body>
<!--<script src="https://api.map.baidu.com/api?v=2.0&ak=HuWMDRmExUdhWoXsVSnBgqdvtWzhgfDY&s=1"></script>-->
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../libs/jquery.validate.min.js"></script>
<script type="text/javascript" src="../libs/fastclick.min.js"></script>
<script type="text/javascript" src="../libs/vue/vue.min.js"></script>
<script type="text/javascript" src="../libs/vue/vue-resource.min.js"></script>
<script type="text/javascript" src="../libs/clipboard.min.js"></script>
<script type="text/javascript" src="../libs/require.js"></script>
<script type="text/javascript" src="../libs/var.js"></script>
<script type="text/javascript" src="../libs/common.js"></script>
<script type="text/javascript" src="./js/orderDetail.js"></script>
</html>